<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="./../template/WorkspaceTemplate.xhtml">

    <ui:define name="top">

    </ui:define>

    <ui:define name="left">
    </ui:define>

    <ui:define name="right">

    </ui:define>

    <ui:define name="content">

        <h:form id="analytics" style="font-size: 85%">
            <h2>Client Analytics</h2>
            <p:panel>
                
                <br/>
                <br/>
                <p:tabView>
                    <p:tab title="Client Analytics">
                        <br/>
                        <h:outputText value="Statistics below includes both sales lead and customer" style="font-style: bold"/>
                        <br/><br/>
                        <h:panelGrid columns="2">

                            <p:fieldset legend="Category">
                                <p:pieChart value="#{analyticsBean.getClientCategoryAnalytics()}" var="an" categoryField="#{an.category}" dataField="#{an.value}" width="350px" style="chartStyle"/>
                            </p:fieldset>
                            <p:fieldset legend="Industry Sector">
                                <p:pieChart value="#{analyticsBean.getClientIndustryAnalytics()}" var="an" categoryField="#{an.category}" dataField="#{an.value}" width="350px" style="chartStyle"/>
                            </p:fieldset>
                        </h:panelGrid>
                    </p:tab>

                    <p:tab title="Customer Analytics">

                        <h:panelGrid columns="2">
                            <p:fieldset legend="Category">
                                <p:pieChart value="#{analyticsBean.getCustomerCategoryAnalytics()}" var="an" categoryField="#{an.category}" dataField="#{an.value}" width="350px" style="chartStyle"/>
                            </p:fieldset>
                            <p:fieldset legend="Industry Sector">
                                <p:pieChart value="#{analyticsBean.getCustomerIndustryAnalytics()}" var="an" categoryField="#{an.category}" dataField="#{an.value}" width="350px" style="chartStyle"/>
                            </p:fieldset>
                        </h:panelGrid>
                    </p:tab>

                    <p:tab title="Product Analytics">
                        <br/>
                        <br/>
                        <br/>
                        <h:outputText value="Sales Period" style="font-weight: bold; font-size: 110%"/>
                        <p:separator/> 
                        <br/>
                        <h:panelGrid columns="2" cellpadding="10">
                            <h:outputText style="font-weight: bold" value="Start Date: "/>
                            <p:calendar value="#{analyticsBean.startDate}" showOn="button"/>

                            <h:outputText style="font-weight: bold" value="End Date: "/>
                            <p:calendar value="#{analyticsBean.endDate}" showOn="button"/>
                        </h:panelGrid>
                        <br/>
                        <br/>

                        <p:commandButton image="ui-icon ui-icon-search" value="Display Analytics" actionListener="#{analyticsBean.displayAnalytics}" update="analytics" />
                        <br/>
                        <br/>
                        <br/>
                        <br/>
                        <br/>
                        <br/>
                        <br/>
                        <br/>
                        <br/>
                        <h:panelGroup rendered="#{analyticsBean.startDate != null &amp;&amp; analyticsBean.endDate != null}">
                            <p:fieldset legend="Product Sales">
                                <p:columnChart value="#{analyticsBean.productSalesAnalytics}" var="analytics" xfield="#{analytics.category}" style="chartStyle" width="100%">  
                                    <p:chartSeries label="Quantity Sold (Cases)" value="#{analytics.value}" />  
                                </p:columnChart>
                                <br/>
                                <p:dataTable var="rec" value="#{analyticsBean.productSalesAnalytics}">
                                    <p:column headerText="Product">
                                        <h:outputText value="#{rec.category}"/>
                                    </p:column>
                                    <p:column headerText="Total Sold">
                                        <h:outputText value="#{rec.value}"/>
                                    </p:column>
                                </p:dataTable>
                            </p:fieldset>
                            <br/>
                            <br/>
                            <h:panelGrid columns="1" width="100%">
                                <p:fieldset legend="Regional Sales">
                                    <p:columnChart value="#{analyticsBean.salesRegionAnalytics}" var="analytics" xfield="#{analytics.category}" style="chartStyle" width="100%">  
                                        <p:chartSeries label="Classic Nuts (Cases)" value="#{analytics.value}" />  
                                        <p:chartSeries label="Classic Fruits (Cases)" value="#{analytics.value2}" />  
                                        <p:chartSeries label="Premium Chocolate Nuts (Cases)" value="#{analytics.value3}" />  
                                        <p:chartSeries label="Premium Redcurrant Fruits (Cases)" value="#{analytics.value4}" />  
                                    </p:columnChart>
                                    <br/>
                                    <p:dataTable var="rec" value="#{analyticsBean.salesRegionAnalytics}">

                                        <p:column headerText="Country">
                                            <h:outputText value="#{rec.category}"/>
                                        </p:column>
                                        <p:column headerText="Classic Nuts">
                                            <h:outputText value="#{rec.value}"/>
                                        </p:column>
                                        <p:column headerText="Classic Fruits">
                                            <h:outputText value="#{rec.value2}"/>
                                        </p:column>
                                        <p:column headerText="Premium Chocolate Nuts">
                                            <h:outputText value="#{rec.value3}"/>
                                        </p:column>
                                        <p:column headerText="Premium Redcurrant Fruit">
                                            <h:outputText value="#{rec.value4}"/>
                                        </p:column>
                                    </p:dataTable>
                                </p:fieldset>

                            </h:panelGrid>
                            <br/>
                            <br/>
                            <h:panelGrid columns="1" width="100%">
                                <p:fieldset legend="Industry Sales">
                                    <p:columnChart value="#{analyticsBean.industryRegionAnalytics}" var="analytics" xfield="#{analytics.category}" style="chartStyle" width="100%">  
                                        <p:chartSeries label="Classic Nuts (Cases)" value="#{analytics.value}" />  
                                        <p:chartSeries label="Classic Fruits (Cases)" value="#{analytics.value2}" />  
                                        <p:chartSeries label="Premium Chocolate Nuts (Cases)" value="#{analytics.value3}" />  
                                        <p:chartSeries label="Premium Redcurrant Fruits (Cases)" value="#{analytics.value4}" />  
                                    </p:columnChart>
                                    <br/>
                                    <p:dataTable var="rec" value="#{analyticsBean.industryRegionAnalytics}">
                                        <p:column headerText="Industry">
                                            <h:outputText value="#{rec.category}"/>
                                        </p:column>
                                        <p:column headerText="Classic Nuts">
                                            <h:outputText value="#{rec.value}"/>
                                        </p:column>
                                        <p:column headerText="Classic Fruits">
                                            <h:outputText value="#{rec.value2}"/>
                                        </p:column>
                                        <p:column headerText="Premium Chocolate Nuts">
                                            <h:outputText value="#{rec.value3}"/>
                                        </p:column>
                                        <p:column headerText="Premium Redcurrant Fruits">
                                            <h:outputText value="#{rec.value4}"/>
                                        </p:column>
                                    </p:dataTable>
                                </p:fieldset>
                            </h:panelGrid>
                        </h:panelGroup>
                    </p:tab>
                </p:tabView>

            </p:panel>
        </h:form>
        <br/><br/><br/><br/><br/>

        <script type="text/javascript">
            var chartStyle = {
                padding:20,
                legend: {
                    display:"right",
                    spacing:10
                }
            };
        </script>

    </ui:define>

    <ui:define name="bottom">

    </ui:define>

</ui:composition>
